<template>
<el-scrollbar height="100vh">
   <div >
        <el-container>
			<el-header>
				<h1>走访历史</h1>
			</el-header>
			
			<el-main>
				<el-input style="width: auto; margin: 0 10px;" v-model="val" placeholder="请输入要搜索的贫困户编号" />
				<el-button type="primary" plain :icon="Search" @click="search">搜索</el-button>
					<el-table :data="tableData.records" stripe style="width: 82vw;">
						<el-table-column label="预警" width="100px" prop="alert"
						:filters="[
							{ text: '有风险',value: true },
							{ text: '无风险',value: false }
						]"
						:filter-method="filterHandler"
						>
							<template #default='scope'>
								<el-tag type="success" v-if="!scope.row.alert"><el-icon><Alert/></el-icon></el-tag>
								<el-tag type="danger" v-else><el-icon><Alert/></el-icon></el-tag>
							</template>
						</el-table-column>
						<el-table-column label="贫困户编号" prop="fid"></el-table-column>
						<el-table-column label="户主姓名" prop="headName"></el-table-column>
						<el-table-column label="户主身份证号" :show-overflow-tooltip="true" prop="headIdNumber"></el-table-column>
						<el-table-column label="家庭住址" :show-overflow-tooltip="true">
							<template #default='scope'>
							{{ scope.row.province }}{{ scope.row.city }}{{ scope.row.county }}{{ scope.row.township }}{{ scope.row.village }}
							</template>
						</el-table-column>
						<el-table-column width="350px">
						   <template #default="scope">
							<el-button v-if="!scope.row.alert" type="warning" plain size="small" :icon="AlertOp" @click="alert(scope.row.fid,true)">预警</el-button>
							<el-button v-else type="warning" size="small" @click="alert(scope.row.fid,false)">取消预警</el-button>
							<el-button type="primary" plain size="small" :icon="Update" @click="update(scope.row.fid)">修改</el-button>
							<el-button type="primary" plain size="small" @click="poor(scope.row.fid)">家庭成员</el-button>
							<el-button type="info" size="small" plain @click="interview(scope.row.fid)">走访记录</el-button>
						   </template>
						</el-table-column>
					</el-table>
					<el-pagination
					style="margin-top: 10px;"
					background
					v-model:current-page="params.pageNo"
					:total="tableData.total"
					:page-count="tableData.pages"
					@current-change="getTableData"
					hide-on-single-page
					></el-pagination>
				<el-dialog v-model="dialog.show" title="修改家庭信息" :close-on-click-modal="false" width="830px">
					<MyUpdate v-if="dialog.show" v-model:show="dialog.show" :id="dialog.id" @getTableData="getTableData"/>
				</el-dialog>
				<el-dialog v-model="poorDialog.show" title="家庭成员信息" :close-on-click-modal="false" width="830px" @close="getTableData">
					<MyPoor v-if="poorDialog.show" :id="poorDialog.id"/>
				</el-dialog>
				<el-dialog v-model="interviewDialog.show" title="走访记录信息" :close-on-click-modal="false" width="830px">
					<MyInterview v-if="interviewDialog.show" :id="interviewDialog.id"/>
				</el-dialog>
			</el-main>
		</el-container>
   </div>
</el-scrollbar>
</template>
  
<script setup>
import { reactive,ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { get, post } from "@/axios";
import { ElMessage } from "element-plus";
import MyUpdate from "./update"
import MyPoor from "./poor"
import MyInterview from "./interview"
import Update from '@/components/icons/update'
import { Search } from '@element-plus/icons-vue'
import Alert from '@/components/icons/alert'
import { copy } from 'copy-anything'
import { userAreaStore } from '@/stores';
import AlertOp from '@/components/icons/alertOp'
import { Value } from 'sass';
const areaStore = userAreaStore()
const dialog = reactive({
	show: false,
	id: null,
})
const poorDialog = reactive({
	show: false,
	id: null,
})
const interviewDialog = reactive({
	show: false,
	id: null
})
const tableData = reactive({
	records: [],
	pages: 0,
	total: 0
})
const val = ref('')
const allData = ref([])
const params = reactive({
	pageNo: 1,
	pageSize: 13,
	rId: areaStore.userArea,
	fId: val
})
const filterHandler = (value, row, column) => {
	const property = column.property
	return row[property] === value
}
function update (fId) {
	dialog.id = fId
	dialog.show = true
}
function poor (fId) {
	poorDialog.id = fId
	poorDialog.show = true
}
function interview (fId) {
	interviewDialog.id = fId
	interviewDialog.show = true
}
function alert (fid,alert) {
	post("/family/alert",{fid,alert},content => {
		getTableData()
	})
}
function getTableData () {
	get("/family/list",params,content => {
		tableData.records=content.records
		tableData.pages=content.pages
		tableData.total = content.total
	})
}
function search() {
	getTableData()
}
getTableData()

</script>
  
<style scoped lang="scss">
.el-container {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 5px solid; /* 边框大小 */  
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); /* 阴影效果 */  
	border-radius: 10px;
	margin-bottom: 0px;
	height: 830px;
	overflow: hidden;
	.el-header {
		line-height: 60px;
		h1 {
			letter-spacing: 1.2rem;
			font-size: 1.5rem;
		}
	}
}


</style>